iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Modern Web

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站系列 第 9

[VR 前後端交響曲Day9] 由外到內:Vue元件裡的props屬性(2)

  • 分享至 

  • xImage
  •  

昨天提到props屬性可以將外層元件的資料,傳遞到內層元件。
舉的例子是傳入特定的author字串給News元件,

但是一般來說的網頁使用情境,不太可能會把資料寫死在標籤裡XD。
比較常見的是讓使用者自己輸入,或是透過後端資料庫API傳資料進來。

傳入子元件的資料是變數

在下列例子,我們希望News這個子元件會動態接收從Vue instance傳過去父元件姓名的值~並在子元件裡把觀眾的暱稱印出來。
該如何實作呢?

我們可以參考第5天:單向資料綁定(v-bind)與雙向事件處理(v-on)鐵人賽的範例修改、透過可以傳給子元件的props屬性把變數的值成功傳到子元件!

Step1. 在id名為content的Vue Root掛載點,利用v-bind綁定變數

昨天在子元件內是傳入無法修改的作者名稱:
<News author="Ting"></News>
今天我想換成可以讓使用者輸入的暱稱欄位
<News v-bind:nickname="name"></News>
並且跟input輸入值的做連動

html: home.html.erb

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案:{{ day }}</div>
  <div class="main-body">本日主題:{{ topic }}</div>

  <News v-bind:nickname="name"></News>

  <div class="content-form">
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <p class="control">
            <input class="input" type="text" placeholder="你的暱稱" v-bind:nickname="name" v-model="name">
          </p>
        </div>
      </div>
    </div>
    <button class="button is-primary is-light" v-on:click="thankyou">送出</button>
  </div>    
  <Foot></Foot>
</div>

第5天曾經介紹過雙向事件處理時會使用到v-model以及v-on,在此一併加入例子做練習~

<!-- 表單輸入框 -->
  <input class="input" type="text" placeholder="你的暱稱" v-bind:nickname="name" v-model="name">
<!-- 按鈕 -->
  <button class="button is-primary is-light" v-on:click="thankyou">送出</button>

Step2. JS抓取Vue Root掛載點的id元素,建構一個Vue instance並新增data屬性name,並預設為空字串。

home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import News from "../components/news"
import Foot from "../components/foot"


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      el,
      data: {
        day: "第 9 天",
        topic: "元件的溝通 - props (2)",
        name: ''
      },
      methods: {
        thankyou(){
          alert( `${this.name},謝謝你收看Vue x Rails 鐵人賽系列!`)
        }
      },
      components: { News, Foot }
    })    
  }
})

Step3. 設置props

props的設置有兩種方式,array陣列以及javascript的object物件。在此例是先來個簡單的array:

<template>
  <div class="news">
    <h1>本日重點:{ {  message } } </h1>
    <i>觀眾: { { nickname } } </i>
  </div>
</template>

<script>
  export default { 
    props: ['nickname'],    
    data: function () {
      return {
        message: "由外層到內層元件的單向資料流:設定元件屬性props,並傳入變數"
      }
    }
  }
</script>

大功告成,變數成功地傳入News子元件囉。

完成圖

明天就是第十天啦(遠目),在真正開始實作Vue.js框架的Rails專案之前,還會再花個兩三天談元件之間的資料傳遞(有沒有開始覺得頭很暈啊

這兩天了解「由外層元件到內層元件」的單向資料流傳遞,明天要來談談如何由「內層元件到外層元件」進行單向事件的傳遞,敬請期待!


上一篇
[VR 前後端交響曲Day8] 由外到內:Vue元件裡的props屬性(1)
下一篇
[VR 前後端交響曲Day10] Vue元件裡由內而外的事件單向傳遞: $emit
系列文
「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言